<template>
	<view class="content">
		<!-- <image src="http://113.142.144.25:9301/statics/appimg/login_bg_new.png" style="position: fixed;top:0;left:0;height: 100vh;width:100vw;z-index:-1;"></image> -->
		<!-- <view class="login_img"><image mode="aspectFill" src="/static/image/iamhe_new.png"></image></view> -->
		<swiper class="ct_tab">
			<swiper-item  :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in tabList" :key="index" class="ct_item"  @click="clickCtTab(index)">
				<text  v-text="item.title"></text>
			</swiper-item>
		</swiper>
		<!-- 个人注册 -->
		<view v-if="tabCur===0">
			<view class="login_from">
				<view class="login_from_input">
					<view class="login_from_name" >用户名</view>
					<view class="login_from_fun">
						<input type="text" v-model="registerFrom.username" placeholder="请输入用户名" @input="onInput">
					</view>
				</view>
				<text v-if="validError" style="font-size: 23rpx;float:right;padding: 15rpx;color:darkred">{{errorMsg}}</text>
				<view class="login_from_input">
					<view class="login_from_name">密码</view>
					<view class="login_from_fun"><input type="digit" password="true" placeholder="请输入登录密码" v-model="registerFrom.password"></view>
				</view>
				
				<view class="login_from_input">
					<view class="login_from_name">确认密码</view>
					<view class="login_from_fun"><input type="digit" password="true" placeholder="请确认登录密码" v-model="repeatPassword"></view>
				</view>
				<view class="login_from_input">
					<view class="login_from_name" >个人姓名</view>
					<view class="login_from_fun"><input  maxlength="11" v-model="registerFrom.realName" placeholder="请输入个人姓名"></view>
				</view>
				<view class="login_from_input">
					<view class="login_from_name" >身份证号</view>
					<view class="login_from_fun"><input  maxlength="18" v-model="registerFrom.certNo" placeholder="请输入个人身份证号"></view>
				</view>
				<view class="login_from_input">
					<view class="login_from_name" >身份证有效期起始时间</view>
					<view class="login_from_fun">
						<view class="" style="float: left;margin-left: 2%;text-align: left;">
							<picker
								mode="date"
								:value="date"
								:start="startDate"
								:end="endDate"
								@change="startChange">
								<view class="sele_bg">
									<text>{{date}}</text>
									<!-- <image class="sele_icon" src="../../../static/images/tab_down_icon.png"></image> -->
								</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="login_from_input">
					<view class="login_from_name" >身份证有效期截止时间</view>
					<view class="login_from_fun">
						<view class="" style="float: left;margin-left: 2%;text-align: left;">
							<picker
								mode="date"
								:value="date1"
								:start="startDate"
								:end="endDate"
								@change="endChange">
								<view class="sele_bg">
									<text>{{date1}}</text>
								</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="login_from_input">
					<view class="login_from_name" >手机号</view>
					<view class="login_from_fun"><input type="number" maxlength="11" v-model="registerFrom.mobile" placeholder="请输入手机号码"></view>
				</view>
				<view class="login_from_input">
					<view class="login_from_name" >验证码</view>
					<view class="login_from_fun">
						<input type="number" style="width: 40%; text-align: left" maxlength="6" placeholder="验证码" v-model="registerFrom.verificationCode">
						<label class="regFrom_tom_yzlabel" :style="{ color : QzyzmStare?'#cccccc':'#2ebbfe'}" @click="Qzyzm">{{Qztime}}{{Qztext}}</label>
					</view>
				</view>
				
				<view class="login_from_dl">
					<button @click="denglu">注册</button>
				</view>
				
				<view class="logo_xieyi">
					<label @click="moutcl" :class="gouxSta?'cuIcon-squarecheckfill':'cuIcon-square'"></label>
					<view class="logo_text">请勾选并阅读<text @click="showRigster()">《注册协议》</text>及<text @click="showPrivate()">《隐私协议》</text></view>
				</view>
			</view>
		</view>
		<!-- 企业注册 -->
		<view v-if="tabCur===1">
			<view class="login_from">
				<view class="login_from_input">
					<view class="login_from_name" >用户名</view>
					<view class="login_from_fun">
						<input type="text" v-model="registerFrom.username" placeholder="请输入用户名" @input="onInput">
					</view>
				</view>
				<text v-if="validError" style="font-size: 23rpx;float:right;padding: 15rpx;color:darkred">{{errorMsg}}</text>
				<view class="login_from_input">
					<view class="login_from_name">密码</view>
					<view class="login_from_fun"><input type="digit" password="true" placeholder="请输入登录密码" v-model="registerFrom.password"></view>
				</view>
				
				<view class="login_from_input">
					<view class="login_from_name">确认密码</view>
					<view class="login_from_fun"><input type="digit" password="true" placeholder="请确认登录密码" v-model="repeatPassword"></view>
				</view>
				<view class="login_from_input">
					<view class="login_from_name" >企业/机构名称</view>
					<view class="login_from_fun"><input v-model="registerFrom.realName" placeholder="请输入企业/机构名称"></view>
				</view>
				<view class="login_from_input">
					<view class="login_from_name" >法人类型</view>
					<view class="login_from_fun">
						<picker style="width: 100%;" @change="corpTypeChange" :value="corpTypeIndex"  :range-key="'dictLabel'" :range="corpTypeList">
							<view style="font-size: 30rpx; float:left;" class="uni-input">{{corpTypeList[corpTypeIndex].dictLabel || '法人类型'}}</view>
						</picker>
					</view>
				</view>
				<view class="login_from_input">
					<view class="login_from_name" >统一社会信用代码</view>
					<view class="login_from_fun"><input v-model="registerFrom.creditCode" placeholder="请输入社会统一信用代码"></view>
				</view>
				<view class="login_from_input">
					<view class="login_from_name" >法人姓名</view>
					<view class="login_from_fun"><input v-model="registerFrom.legalName" placeholder="请输入法人姓名"></view>
				</view>
				<view class="login_from_input">
					<view class="login_from_name" >法人身份证号</view>
					<view class="login_from_fun"><input  maxlength="18" v-model="registerFrom.certNo" placeholder="请输入法人身份证号"></view>
				</view>
				<view class="login_from_input">
					<view class="login_from_name" >法人身份证有效期起始时间</view>
					<view class="login_from_fun">
						<view class="" style="float: left;margin-left: 2%;text-align: left;">
							<picker
								mode="date"
								:value="date"
								:start="startDate"
								:end="endDate"
								@change="startChange">
								<view class="sele_bg">
									<text>{{date}}</text>
									<!-- <image class="sele_icon" src="../../../static/images/tab_down_icon.png"></image> -->
								</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="login_from_input">
					<view class="login_from_name" >法人身份证有效期截止时间</view>
					<view class="login_from_fun">
						<view class="" style="float: left;margin-left: 2%;text-align: left;">
							<picker
								mode="date"
								:value="date1"
								:start="startDate"
								:end="endDate"
								@change="endChange">
								<view class="sele_bg">
									<text>{{date1}}</text>
								</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="login_from_input">
					<view class="login_from_name" >手机号</view>
					<view class="login_from_fun"><input type="number" maxlength="11" v-model="registerFrom.mobile" placeholder="请输入手机号码"></view>
				</view>
				<view class="login_from_input">
					<view class="login_from_name" >验证码</view>
					<view class="login_from_fun">
						<input type="number" style="width: 40%; text-align: left" maxlength="6" placeholder="验证码" v-model="registerFrom.verificationCode">
						<label class="regFrom_tom_yzlabel" :style="{ color : QzyzmStare?'#cccccc':'#2ebbfe'}" @click="Qzyzm">{{Qztime}}{{Qztext}}</label>
					</view>
				</view>
				
				<view class="login_from_dl">
					<button @click="denglu">注册</button>
				</view>
				
				<view class="logo_xieyi">
					<label @click="moutcl" :class="gouxSta?'cuIcon-squarecheckfill':'cuIcon-square'"></label>
					<view class="logo_text">请勾选并阅读<text @click="showRigster()">《注册协议》</text>及<text @click="showPrivate()">《隐私协议》</text></view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	function getDate(type) {
		const date = new Date();
	 
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	 
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
	 
		return `${year}-${month}-${day}`;
	}
	
	import * as register from '@/api/register.js'
	import * as user from '@/api/login.js'
	import * as dict from '@/api/system/dict/data.js'

	export default {

		data(){
			return {
				gouxSta:false,
				Qztime:'',
				QzyzmStare:false,
				Qztext:'获取验证码',
				authCode:'',
				repeatPassword:'',
				registerFrom:{
					createBy: null,
					createTime: null,
					delFlag: null,
					id: null,
					isRenzheng:null,
					isSpt: null,
					isZpt: null,
					mobile: '',
					data: {},
					password: '',
					realName: '',
					remark: null,
					renzhengTime: null,
					searchValue: null,
					status: null,
					updateBy: null,
					updateTime: null,
					userType: '1',//个人1   企业2   服务机构3
					username: '',
					verificationCode: '',
					weixinOpenId: '',
					certexpDate: '请选择',//证件有效期止
					certeffDate:'请选择', //证件有效期起
					certNo: null,// 个人身份证号、企业法人身份证号
					legalName: null, //法人姓名  企业类型显示
					creditCode: null, //统一社会信用代码 企业类型显示
					corpType: null, //法人类型   (数据字典类型：u_corp_type）  企业类型显示
				},
				idStorage:'',
				errorMsg:'用户名已存在',
				validError:false,
				privateText:'用户隐私协议',
				registerText:'用户注册协议',
				registerType:'1',
				tabCur:0,
				tabList:[
					{
						title:'个人用户',
					},{
						title:'企业用户',
					}
				],
				corpTypeList:[],
				corpTypeIndex:0,
				date:'请选择',
				date1:'请选择',
				startDate: getDate('start'),
				endDate: getDate('end'),
			}
		},
		onLoad(option){
			if(option.mytype='2'){
				this.getOpenId()
			}
			console.log(option)
			this.registerType = option.type
			this.getData()
			console.log(this.registerType)
		},
		methods: {
			getData(){
				dict.getDicts('u_corp_type').then((res)=>{
					this.corpTypeList = res.data
				})
			},
			clickCtTab(ctCur){
				this.tabCur = ctCur
				console.log('点击了--->'+this.tabCur)
				this.registerFrom = {
					createBy: null,
					createTime: null,
					delFlag: null,
					id: null,
					isRenzheng:null,
					isSpt: null,
					isZpt: null,
					mobile: '',
					data: {},
					password: '',
					realName: '',
					remark: null,
					renzhengTime: null,
					searchValue: null,
					status: null,
					updateBy: null,
					updateTime: null,
					userType: '1',//个人1   企业2   服务机构3
					username: '',
					verificationCode: '',
					weixinOpenId: '',
					certexpDate: '请选择',//证件有效期止
					certeffDate:'请选择', //证件有效期起
					certNo: null,// 个人身份证号、企业法人身份证号
					legalName: null, //法人姓名  企业类型显示
					creditCode: null, //统一社会信用代码 企业类型显示
					corpType: null, //法人类型   (数据字典类型：u_corp_type）  企业类型显示
				}
			},
			getOpenId(){
				var that = this
				//第二种 
				const value = uni.getStorageSync('openId');
				that.registerFrom.weixinOpenId = value
			},
			moutcl(){
				if( this.gouxSta == false){
					this.gouxSta = true
				}else{
					this.gouxSta = false
				}
			},
			denglu(){
				if( this.gouxSta == false){
					uni.showToast({
						"title":"请阅读并勾选用户协议",
						"icon":'none'
					})				
				}else{
					if(this.registerFrom.username == ''){
						uni.showToast({
							"title":"请输入用户名",
							"icon":'none'
						})
					}else if(this.registerFrom.mobile == ''){
						uni.showToast({
							"title":"请输入手机号",
							"icon":'none'
						})
					}else if(this.registerFrom.password == ''){
						uni.showToast({
							"title":"请输入密码",
							"icon":'none'
						})
					}else if(this.repeatPassword == ''){
						uni.showToast({
							"title":"请确认密码",
							"icon":'none'
						})
					}else if(this.registerFrom.verificationCode == ''){
						uni.showToast({
							"title":"请输入验证码",
							"icon":'none'
						})
					}else if(this.repeatPassword != this.registerFrom.password){
						uni.showToast({
							"title":"两次输入密码不一致",
							"icon":'none'
						})
					}
					else{
						this.registerFrom.certeffDate = this.date
						this.registerFrom.certexpDate = this.date1
						this.registerFrom.userType = '1'
						console.log(this.registerType)
						if(this.registerType == '2'){
							this.register();
						}else {
							this.registerByMobile()
						}
					}
				}		
			},
			
			Qzyzm(){
				var type = ''
				if(this.tabCur == 0){
					type = '01'
				}else{
					type = '02'
				}
				register.getCodeProvince({mobile:this.registerFrom.mobile,type:type}).then((res)=>{
					uni.showToast({
						icon:'none',
						title:'验证码已发送！'
					})
				})
				var num = 60;
				if( this.QzyzmStare == false){
					this.Qztime ='60';
					this.Qztext = 's后获取';
					this.QzyzmStare = true;
					var interval = setInterval(() =>{
						--this.Qztime
					},1000)
					setTimeout(()=>{
						clearInterval(interval)
						this.Qztext = '获取验证码'
						this.Qztime = ''
						this.QzyzmStare = false
					},60000)				
				}
			},
			onInput(e) {
				register.existByUsername(e.detail.value).then((res)=>{
					if(res.code = 200){
						// this.validError = true
						// this.errorMsg = '用户名可用'
					}else{
						this.validError = true
						this.errorMsg = '用户名已存在'
					}
				})
			},
			showRigster(){
				uni.showModal({
				    title: '提示',
				    content: this.registerText,
					showCancel:false,
				    success: function (res) {
				        if (res.confirm) {
							
				        } else if (res.cancel) {
							
				        }
				    }
				});
			},
			showPrivate(){
				uni.showModal({
				    title: '提示',
				    content: this.privateText,
					showCancel:false,
				    success: function (res) {
				        if (res.confirm) {
							
				        } else if (res.cancel) {
							
				        }
				    }
				});
			},
			register(){
				var that = this	
				register.register(that.registerFrom).then((res)=>{
					if(res.code == 200){
						user.login(this.registerFrom.username,this.registerFrom.password).then((res)=>{
							if(res.code == 200){
								uni.setStorage({
									key:'userInfo',
									data:res.data
								})
								uni.switchTab({
									url:'/subpages/pages/userCenter/userCenter?type='+'login'
								})
							}
						})
					}
				})
			},
			registerByMobile(){
				var that = this
				console.log(that.registerFrom)
				register.registerByMobile(that.registerFrom).then((res)=>{
					if(res.code == 200){
						user.login(this.registerFrom.username,this.registerFrom.password).then((res)=>{
							if(res.code == 200){
								uni.setStorage({
									key:'userInfo',
									data:res.data
								})
								uni.switchTab({
									url:'/subpages/pages/userCenter/userCenter?type='+'login'
								})
							}
						})
					}
				})
			},
			corpTypeChange(e){
				this.corpTypeIndex = e.detail.value
			},
			endChange(e){
				this.date1 = e.detail.value
			},
			startChange(e){
				this.date = e.detail.value
			}
		}
	}
</script>
<style>
	
	page{ 
		background: #fff; 
	}
	
	.login_img{ 
		width: 100%; 
		height: auto; 
		margin-top: 90upx; 
	}
	
	.login_img image{ 
		width: 170upx; 
		height: 170upx; 
		display: block; 
		margin: 0px auto; 
		border-radius: 50%; 
	}
	
	.login_from{ 
		width: 100%; 
		height: auto; 
		box-sizing: border-box; 
		padding: 20upx 8%; 
	}
	
	.login_from_input{ 
		width: 100%; 
		height:auto; 
		display: flex; 
		flex-direction: row; 
		justify-content: space-between; 
		align-items: center; 
		border-bottom: 1px #eee solid; 
		padding: 40upx 0px; 
		margin: 0px auto;  
	} 
	
	.login_from_name{ 
		width: 30%; 
	}
	.login_from_fun{ 
		width: 70%; 
		display: flex; 
		flex-direction: row; 
		justify-content: flex-end; 
		align-items: center;  
	}
	
	.login_from_fun input{ 
		width: 100%; 
		text-align: left; 
		font-size: 14px;  
	}
	
	.login_from_dl{ 
		width: 100%; 
		height: 50px; 
		line-height: 50px; 
		margin-top: 150upx;   
	}
	
	.login_from_dl button{ 
		width: 100%; 
		height: 50px; 
		line-height: 50px; 
		background: #016fb8; 
		color: #fff; 
		border-radius: 50px; 
	}
	
	.logo_xieyi{ 
		width: 100%; 
		height: 40px; 
		line-height: 40px; 
		display: flex; 
		flex-direction: row; 
		margin-top: 30upx; 
		align-items: center; 
		color: #444; 
		font-size: 14px; 
		justify-content: center; 
	}
	
	.logo_xieyi label{ 
		font-size: 18px; 
		margin-right: 1%; 
		display: block; 
		width: 15px; 
		height: 15px; 
	}
	
	.cuIcon-squarecheckfill{ 
		color: #016fb8; 
	}
	
	.logo_text text{ 
		color: #016fb8; 
	}
	
	.getyzm{ 
		width: 60%; 
		display: flex; 
		flex-direction: row; 
		justify-content: flex-end; 
		color: #016fb8; 
	}
	
	.cuicon{ 
		font-size: 18px; 
	}  
	
	.regFrom_tom_yzlabel{ 
		width: 60%; 
		text-align: 
		right; 
	}
	
	.cuIcon-squarecheckfill{ 
		background: #016fb8; 
		position: relative; 
		border: 2px #ccc solid; 
		box-sizing: border-box; 
		border-radius: 3px; 
	}
	
	.cuIcon-square{ 
		background: #fff; 
		border: 2px #ccc solid; 
		box-sizing: border-box; 
		border-radius: 3px; 
	}
	
	.ct_tab{
		    width: 698upx;
			height: 100rpx;
		    margin: 0 auto;
		    padding: 30upx 0;
		    font-size: 30upx;
		    font-weight: bold;
		    color: #c0c8d0;
		    white-space: nowrap;
		    display: flex;
		    overflow: hidden;
			margin-left: 30%;
		}
		.ct_item{
		    width: 150upx;    
		    padding: 30upx 0;
		    display: inline-block;
		}
		.ct_item text{
		    padding: 30upx 0;
		}
		.ct_active{
		    color:#007AFF;
		}
		.ct_active text{
		    border-bottom: 2px solid #007AFF;
		}
		swiper{
		    width:100%;
		}
		
		swiper-item{
		    width: 180upx !important;
		}
	
</style>